<template>
    <aside class="right-sidebar">
        <div class="register-section">
            <div class="line-opacity">
                <div class="text-dark">
                    注册，开始自定义<i class="lls-icon-right"></i>
                </div>
                <p class="summary">在任何地方，启动同步并保护你的数据</p>
            </div>
            <ul>
                <li>
                    <a class="wechat-register">
                        <img src="@/assets/wx.svg" alt="微信登录" />微信登录
                    </a>
                </li>
                <li>
                    <img src="@/assets/qq.svg" alt="qq登录" />
                </li>
                <li>
                    <img src="@/assets/wb.svg" alt="wb登录" />
                </li>
                <li>
                    <img src="@/assets/email.svg" alt="邮箱登录" />
                </li>
            </ul>
        </div>
        <div class="calendar-section">
            <div class="warp-box">
                <div class="date_box">
                    <div class="layui-row layui-col-space10">
                        <div class="date_center">
                            <div class="clearfix date_top">
                                <h3 class="date_tip">
                                    <div class="data_box">
                                        <!-- 左箭头 -->
                                        <div
                                            class="data_icon_left"
                                            @click="prevMonth"
                                        >
                                            <i class="lls-icon-arrow-left"></i>
                                        </div>
                                        <!-- 年 -->
                                        <div class="data_year">
                                            <div>{{ displayedYear }}</div>
                                            <lls-dropdown
                                                trigger="click"
                                                @command="handleYearItem"
                                            >
                                                <i
                                                    class="lls-icon-arrow-down lls-icon--right"
                                                ></i>
                                                <lls-dropdown-menu
                                                    slot="dropdown"
                                                >
                                                    <lls-dropdown-item
                                                        :command="year"
                                                        v-for="year in yearsList"
                                                        :key="year"
                                                        >{{
                                                            year
                                                        }}</lls-dropdown-item
                                                    >
                                                </lls-dropdown-menu>
                                            </lls-dropdown>
                                        </div>
                                        <!-- 月 -->
                                        <div class="data_month">
                                            <div>{{ displayedMonth + 1 }}</div>
                                            <lls-dropdown
                                                trigger="click"
                                                @command="handleMonthItem"
                                            >
                                                <i
                                                    class="lls-icon-arrow-down lls-icon--right"
                                                ></i>
                                                <lls-dropdown-menu
                                                    slot="dropdown"
                                                >
                                                    <lls-dropdown-item
                                                        :command="month"
                                                        v-for="month in monthsList"
                                                        :key="month"
                                                        >{{
                                                            month
                                                        }}</lls-dropdown-item
                                                    >
                                                </lls-dropdown-menu>
                                            </lls-dropdown>
                                        </div>
                                        <!-- 日 -->
                                        <div class="data_day">
                                            <div>{{ curDate }}</div>
                                        </div>
                                        <!-- 右箭头 -->
                                        <div
                                            class="data_icon_right"
                                            @click="nextMonth"
                                        >
                                            <i class="lls-icon-arrow-right"></i>
                                        </div>
                                        <div
                                            class="data_today"
                                            @click="goToToday"
                                        >
                                            <img
                                                src="@/assets/jintian.svg"
                                                alt="今天"
                                            />
                                        </div>
                                    </div>
                                </h3>
                            </div>
                            <div class="clearfix date_header">
                                <div class="week_item">日</div>
                                <div class="week_item">一</div>
                                <div class="week_item">二</div>
                                <div class="week_item">三</div>
                                <div class="week_item">四</div>
                                <div class="week_item">五</div>
                                <div class="week_item">六</div>
                            </div>
                            <div class="clearfix day_item" id="day_item">
                                <div
                                    v-for="(day, index) in dateArr"
                                    :key="index"
                                    :class="[
                                        'day_list',
                                        {
                                            nowNonth:
                                                day.month !== displayedMonth,
                                            selected: day.selected,
                                        },
                                    ]"
                                    @click="selectDate(day)"
                                >
                                    <div
                                        :class="[
                                            'day_center',
                                            { today: day.isToday },
                                        ]"
                                    >
                                        <div class="dayone">
                                            {{ day.noli.cDay }}
                                        </div>
                                        <div
                                            v-if="day.isHoliday"
                                            class="holiday"
                                        >
                                            <img
                                                src="@/assets/xiu.svg"
                                                alt="休息"
                                            />
                                        </div>
                                        <div
                                            class="daytwo"
                                            :class="{
                                                term:
                                                    day.noli.Term &&
                                                    day.noli.isTerm,
                                            }"
                                        >
                                            {{ getCurDay(day) }}
                                        </div>
                                        <div
                                            v-if="day.shark === 1"
                                            class="dayshark"
                                        >
                                            .
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</template>
<script>
import calendar from "@/assets/js/getData.js";
export default {
    name: "RightSidebar",
    data() {
        return {
            curYear: 0, // 当前年
            curMonth: 0, // 当前月
            curDate: 0, // 当前日
            displayedYear: 0, // 显示的年
            displayedMonth: 0, // 显示的月
            displayedDate: 0, // 显示的日
            dateArr: [], // 日期数组
            MonthArry: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每月天数数组
            tooltipVisible: false,
            tooltipContent: "",
            yearsList: [],
            monthsList: [],
            selectedDay: null, // 用户选择的日期
            holidayList: [
                // 节假日数据
                { year: 2024, month: 1, date: 1, name: "元旦" },
                { year: 2024, month: 2, date: 10, name: "春节" },
                { year: 2024, month: 2, date: 11, name: "春节" },
                { year: 2024, month: 2, date: 12, name: "春节" },
                { year: 2024, month: 2, date: 13, name: "春节" },
                { year: 2024, month: 2, date: 14, name: "春节" },
                { year: 2024, month: 2, date: 15, name: "春节" },
                { year: 2024, month: 2, date: 16, name: "春节" },
                { year: 2024, month: 2, date: 17, name: "春节" },
                { year: 2024, month: 4, date: 4, name: "清明节" },
                { year: 2024, month: 4, date: 5, name: "清明节" },
                { year: 2024, month: 4, date: 6, name: "清明节" },
                { year: 2024, month: 5, date: 1, name: "劳动节" },
                { year: 2024, month: 5, date: 2, name: "劳动节" },
                { year: 2024, month: 5, date: 3, name: "劳动节" },
                { year: 2024, month: 5, date: 4, name: "劳动节" },
                { year: 2024, month: 5, date: 5, name: "劳动节" },
                { year: 2024, month: 6, date: 10, name: "端午节" },
                { year: 2024, month: 9, date: 15, name: "中秋节" },
                { year: 2024, month: 9, date: 16, name: "中秋节" },
                { year: 2024, month: 9, date: 17, name: "中秋节" },
                { year: 2024, month: 10, date: 1, name: "国庆节" },
                { year: 2024, month: 10, date: 2, name: "国庆节" },
                { year: 2024, month: 10, date: 3, name: "国庆节" },
                { year: 2024, month: 10, date: 4, name: "国庆节" },
                { year: 2024, month: 10, date: 5, name: "国庆节" },
                { year: 2024, month: 10, date: 6, name: "国庆节" },
                { year: 2024, month: 10, date: 7, name: "国庆节" },
            ],
        };
    },
    methods: {
        // 初始化年份和月份列表
        getYearAndMouth() {
            const startYear = 1951;
            const endYear = 2050;
            this.monthsList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            this.yearsList = Array.from(
                { length: endYear - startYear + 1 },
                (v, i) => startYear + i
            );
        },
        // 处理选择的年份
        handleYearItem(command) {
            let selectYear = command;
            this.displayedYear = selectYear;
            this.showDate(
                this.displayedYear,
                this.displayedMonth,
                this.displayedDate
            );
        },
        // 处理选择的月份
        handleMonthItem(command) {
            let selectMonth = command - 1; // 月份索引从0开始
            this.displayedMonth = selectMonth;
            this.showDate(
                this.displayedYear,
                this.displayedMonth,
                this.displayedDate
            );
        },
        // 选择日期
        selectDate(day) {
            // 确保只选择当前显示月份的日期
            this.dateArr.forEach((date) => {
                date.selected = false;
            });

            // 设置当前选中的日期
            this.displayedDate = day.tdody;
            day.selected = true;
            this.curDate = day.tdody;
            this.selectedDay = day; // 保存用户选择的日期
        },
        // 显示日期
        showDate(year, month, today) {
            this.MonthArry[1] = 28 + this.isLeap(year);
            const thisTime = new Date(year, month, 1);
            const firstday = thisTime.getDay();
            const tr_str = Math.ceil((this.MonthArry[month] + firstday) / 7);

            const preYear = month === 0 ? year - 1 : year;
            const nextYear = month === 11 ? year + 1 : year;
            const preMonth = month === 0 ? 11 : month - 1;
            const nextMonth = month === 11 ? 0 : month + 1;

            const dateArr = [];
            for (let i = 0; i < tr_str; i++) {
                for (let k = 0; k < 7; k++) {
                    let idx = i * 7 + k;
                    let date_str = idx - firstday + 1;
                    let nowYear, nowMonth;

                    if (date_str <= 0) {
                        nowYear = preYear;
                        nowMonth = preMonth;
                        date_str = new Date(
                            thisTime -
                                Math.abs(date_str - 1) * 24 * 60 * 60 * 1000
                        ).getDate();
                    } else if (date_str > this.MonthArry[month]) {
                        nowYear = nextYear;
                        nowMonth = nextMonth;
                        date_str -= this.MonthArry[month];
                    } else {
                        nowYear = year;
                        nowMonth = month;
                    }

                    // 判断是否是今天
                    const isToday =
                        nowYear === this.curYear &&
                        nowMonth === this.curMonth &&
                        date_str === this.curDate;

                    // 仅为当前显示月份的日期设置选中状态
                    const isSelected =
                        nowYear === year &&
                        nowMonth === month &&
                        date_str === today;

                    // 检查是否是用户之前选择的日期
                    const isPreviouslySelected =
                        this.selectedDay &&
                        nowYear === this.selectedDay.year &&
                        nowMonth === this.selectedDay.month &&
                        date_str === this.selectedDay.tdody;

                    // 检查是否是节假日
                    const isHoliday = this.holidayList.some(
                        (holiday) =>
                            holiday.year === nowYear &&
                            holiday.month === nowMonth + 1 &&
                            holiday.date === date_str
                    );

                    dateArr.push({
                        year: nowYear,
                        month: nowMonth,
                        tdody: date_str,
                        noli: calendar.solar2lunar(
                            nowYear,
                            nowMonth + 1,
                            date_str
                        ),
                        shark: 0,
                        selected: isPreviouslySelected || isSelected,
                        isToday: isToday,
                        isHoliday: isHoliday, // 标记是否是节假日
                    });
                }
            }

            this.dateArr = dateArr;
        },
        // 获取当天的农历信息
        getCurDay(day) {
            if (day.noli.Term && day.noli.isTerm) {
                return day.noli.Term;
            } else if (day.noli.festival) {
                return day.noli.festival;
            } else if (day.noli.lunarFestival) {
                return day.noli.lunarFestival;
            } else {
                return day.noli.IDayCn;
            }
        },
        // 判断是否是今天
        isToday(day) {
            return day.isToday;
        },
        // 回到今天
        goToToday() {
            const curTime = new Date();
            this.curYear = curTime.getFullYear();
            this.curMonth = curTime.getMonth();
            this.curDate = curTime.getDate();
            this.selectedDay = {
                year: this.curYear,
                month: this.curMonth,
                tdody: this.curDate,
            }; // 更新选择的日期为今天
            this.getCurrentDate();
            this.showDate(this.curYear, this.curMonth, this.curDate);
        },
        // 判断是否是闰年
        isLeap(year) {
            return year % 100 === 0
                ? year % 400 === 0
                    ? 1
                    : 0
                : year % 4 === 0
                ? 1
                : 0;
        },
        // 上一个月
        prevMonth() {
            if (this.displayedMonth === 0) {
                this.displayedMonth = 11;
                this.displayedYear -= 1;
            } else {
                this.displayedMonth -= 1;
            }
            this.showDate(
                this.displayedYear,
                this.displayedMonth,
                this.displayedDate
            );
        },
        // 下一个月
        nextMonth() {
            if (this.displayedMonth === 11) {
                this.displayedMonth = 0;
                this.displayedYear += 1;
            } else {
                this.displayedMonth += 1;
            }
            this.showDate(
                this.displayedYear,
                this.displayedMonth,
                this.displayedDate
            );
        },
        // 获取当前日期
        getCurrentDate() {
            const curTime = new Date();
            this.curYear = curTime.getFullYear();
            this.curMonth = curTime.getMonth(); // 返回0-11月
            this.curDate = curTime.getDate();
            this.displayedYear = this.curYear;
            this.displayedMonth = this.curMonth;
            this.displayedDate = this.curDate;
            this.selectedDay = {
                year: this.curYear,
                month: this.curMonth,
                tdody: this.curDate,
            }; // 初始化选择的日期为今天
        },
    },
    mounted() {
        this.getYearAndMouth();
        this.getCurrentDate();
        this.showDate(this.curYear, this.curMonth, this.curDate);
    },
};
</script>

<style scoped lang="scss">
/* @import "@/assets/css/rest.css"; */
/* @import "@/assets/css/public.css"; */
@import "@/assets/css/getdate.css";
.date_tip {
    /* 日期 */
    font-size: 22px;
    font-weight: 700;
    .data_today {
        font-size: 16px;
        cursor: pointer;
    }
    .data_box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .data_icon_left {
        cursor: pointer;
        margin-right: 10px;
        color: #6b7386;
    }

    .data_icon_right {
        cursor: pointer;
        margin-left: 10px;
        color: #6b7386;
    }
    .data_year {
        display: flex;
        align-items: center;
        margin-right: 15px;
        i {
            margin-left: 5px;
            font-size: 12px;
            cursor: pointer;
        }
    }
    .data_month {
        display: flex;
        align-items: center;
        margin-right: 15px;
        i {
            font-size: 12px;
            cursor: pointer;
        }
    }
}
.daytwo {
    /* 节假日 */
    width: 32px;
}
.holiday {
    /* 休假标识 */
    display: block;
    pointer-events: none;
    position: absolute;
    right: -7px;
    top: -10px;
    width: 18px;
    z-index: 11;
    img {
        width: 12px;
        height: 12px;
    }
}
.lls-popper {
    /* 选择弹出层 */
    width: 850px;
    .lls-dropdown-menu__item {
        width: 70px;
        float: left;
    }
}
.day_list.selected .day_center {
    background-color: #2c6ce1;
    color: white;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    position: relative;
}

.day_center.today {
    border: 2px solid #2c6ce1;
    border-radius: 50%;
}
.right-sidebar {
    width: 300px;
    flex: 0 0 300px; /* Ensures the sidebar does not shrink or grow */
    /* padding-top: 10px; */
}

.register-section {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: var(--card-shadow);
    .line-opacity {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        margin: 0 15px;
        padding: 10px;
        text-align: center;
        border-color: rgba(0, 0, 0, 0.03);
        .text-dark {
            color: #6b7386;
            font-size: 20px;
            font-weight: 400;
        }
        .summary {
            font-size: 13px;
            margin-top: 5px;
            color: #caccd5;
        }
    }
    ul {
        box-sizing: border-box;
        margin-top: 15px;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 400;
        height: 32px;
        li {
            list-style-type: none;
            font-size: 13px;
            .wechat-register {
                padding: 3px;
                display: flex;
                align-items: center;
                background: #18b17a;
                border-color: #18b17a;
                color: #fff;
                width: 94px;
                border-radius: 8px;
                margin-bottom: 5px;
                img {
                    width: 32px;
                    padding-right: 3px;
                }
            }
        }
    }
    /* 日历 */
    .warp-box {
        width: 100%;
    }
}
</style>
